<template>
  <div class="scroll-box" ref="scrollBox">
    <div
      class="scroll-body"
      ref="scrollBody"
      :style="{
        '--dataDiff': -diffWidth + 'px',
        animationDuration: Math.ceil(diffWidth / 50) + 2 + 's'
      }"
      :class="{ ani: diffWidth > 0, 'stop-ani': stopAniClassName }"
      @mouseover="stopAni"
      @mouseout="startAni"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      diffWidth: 0,
      stopAniClassName: false,
    };
  },
  mounted() {
    const { $refs } = this;
    setTimeout(() => {
      this.$nextTick(() => {
        if (!$refs.scrollBody) return;
        this.diffWidth =
          $refs.scrollBody.scrollWidth - $refs.scrollBox.clientWidth;
      });
    }, 2000);
  },
  methods: {
    stopAni() {
      this.stopAniClassName = true;
    },
    startAni() {
      this.stopAniClassName = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-box {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.scroll-body {
  pointer-events: auto;
  transition: all linear;
}
.ani {
  animation: move linear infinite;
  &.stop-ani {
    animation: none !important;
  }
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(0);
  }
  85% {
    transform: translateX(var(--dataDiff));
  }
  100% {
    transform: translateX(var(--dataDiff));
  }
}
</style>
